<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title>百度新闻</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .top {
            width: 1400%;
            height: 30px;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            line-height: 30px;
        }

        .top-right a {
            color: #444;
        }

        .top-left a {
            color: black;
        }

        .top-right {
            width: 16%;
            position: absolute;
            right: 0;
            display: flex;
            justify-content: space-around;
            margin-right: 10px;
        }

        .top-left {
            width: 25%;
            display: flex;
            justify-content: space-around;
            position: absolute;
            right: 16%;
        }

        .info {
            width: 50%;
            margin: 0 auto;
            padding-top: 35px;
            display: flex;
            justify-content: space-around;
            vertical-align: middle;
            margin-bottom: 10px;
        }

        .info img {
            width: 135px;
            height: 45px;
            position: relative;
            top: -8px;
        }

        .info-2 {
            width: 70%;

            /* padding-left: 5px; */
        }

        .in1 {
            width: 80%;
            height: 40px;
            border: 1px solid #999;
            padding-left: 10px;
            font-size: 18px;
        }

        input {
            margin: 0;
        }

        button {
            margin: 0;
            position: relative;
            left: -5px;
            top: 1px;
        }

        .btn1 {
            width: 19%;
            height: 40px;
            background-color: #3388ff;
            border: 1px solid #3388ff;
            color: white;
            font-size: 16px;
        }

        .info-2 span {
            color: #666;
            font-size: 13px;
        }

        .info-3 a {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #555;
            margin-left: 5px;
        }

        .nav {
            width: 100%;
            height: 38px;
            background-color: #01204f;
            color: white;
            /* margin-top: 10px; */
             line-height: 38px; 
            font-size: 15px;
        }

        .container {
            width: 58%;
            margin: 0 auto;
            display: flex;
            /* justify-content: space-around; */
            position: relative;
        }

        .container li {
            width: 100%;
            padding:0 10px;
            z-index: 100;
            height: 38px;
        }
        .container li strong{
            width: 100%;
        }
        .container li:nth-child(1) {
            background-color: red;
        }

        .active {
            background-color: red;
        }


        .button {
            position: fixed;
            bottom: 50px;
            right: 250px;
            width: 50px;
            height: 50px;
            background-color: #3388ff;
            border: 1px solid #3388ff;
            color: white;
            font-size: 20px;
            text-align: center;
             transition: all 0.5s linear; 
        }

        .bg {
            width: 60px;
            height: 38px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
            z-index: 50; 
        }

        .content {
            width: 100%;
            height: 2000px;
        }
    </style>
</head>

<body>
    <header>
        <div class="top">
            <ul class="top-right">
                <li><a href="#">百度首页</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">百度新闻客户端</a></li>
            </ul>
            <ul class="top-left">
                <li><a href="#"><strong>网页</strong></a></li>
                <li><strong style="color:#444;">新闻</strong></li>
                <li><a href="#"><strong>贴吧</strong></a></li>
                <li><a href="#"><strong>知道</strong></a></li>
                <li><a href="#"><strong>音乐</strong></a></li>
                <li><a href="#"><strong>图片</strong></a></li>
                <li><a href="#"><strong>视频</strong></a></li>
                <li><a href="#"><strong>地图</strong></a></li>
                <li><a href="#"><strong>文库</strong></a></li>
                |
            </ul>
        </div>
        <div class="info">
            <img src="logo.png" alt="">
            <div class="info-2">
                <input type="text" class="in1">
                <button type="button" class="btn1">百度一下</button>
                <input type="radio" name="name" class="in2" checked> <span>新闻全文</span>
                <input type="radio" name="name" class="in3"> <span>新闻标题</span>
            </div>
            <div class="info-3">
                <a href="#">帮助 </a>
                <a href="#">高级搜索 </a>
                <a href="#">设置</a>
            </div>
        </div>
        <div class="nav">
            <ul class="container">
                <li class="active"><strong>首页</strong></li>
                <li><strong>百家号</strong></li>
                <li><strong>国内</strong></li>
                <li><strong>国际</strong></li>
                <li><strong>军事</strong></li>
                <li><strong>社会</strong></li>
                <li><strong>财经</strong></li>
                <li><strong>娱乐</strong></li>
                <li><strong>体育</strong></li>
                <li><strong>互联网</strong></li>
                <li><strong>科技</strong></li>
                <li><strong>游戏</strong></li>
                <li><strong>时尚</strong></li>
                <li><strong>女人</strong></li>
                <li><strong>汽车</strong></li>
                <li><strong>个性推荐</strong></li>
                <li><strong>更多</strong></li>
                <div class="bg"></div>
            </ul>
        </div>
    </header>
    <main class="content"></main>
    <div class="button" onclick="zhiding(event)">
            &#8593;
    </div>
</body>

</html>
<script>
    var button = document.querySelector('.button');
    var nav = document.querySelector('.nav');
    var top = document.querySelector('.top');
    var bg = document.querySelector('.bg');
    // alert(document.scrollingElement.scrollTop);
    window.onscroll = function () {
        var scrollTop = document.scrollingElement.scrollTop;
        if (scrollTop >= 130) {
            nav.style.position = 'fixed';
            nav.style.top = '0';
            button.style.bottom = '50px';
        } else {
            nav.style.cssText = '';
            button.style.bottom = '-50px';
        }

    }
    function zhiding(ev) {
        document.scrollingElement.scrollTop = 0;
        // console.log('点击按钮');
    }

    var lis = document.querySelectorAll('.container li');
    for (var i = 0; i < lis.length; i++) {
        // 鼠标进来  改变bg位置 宽度
        lis[i].onmouseover = function () {
            // console.log(this.offsetLeft);
            // 元素距离容器左边的偏移距离
            var left = this.offsetLeft;
            // 设置bg的偏移距离
            bg.style.left = left + 'px';
            // 获取标签宽度
            var width = this.offsetWidth;
            bg.style.width = width + 'px';
        }
        // 鼠标出去 ，恢复 位置 宽度
        lis[i].onmouseout = function () {
            bg.style.left = 0;
            bg.style.width = '60px';
        }
    }

</script>